<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Node.js 中文 API</title>
<link rel="stylesheet" href="/public/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/public/bootstrap/css/bootstrap-theme.min.css">
<style>
.notes {
  padding: 15px 30px 15px 15px;
  border-left: 5px solid;
  border-bottom: 1px dotted;
  background-color: #f0f7fd;
  border-color: #3a87ad;
}
.notes h2 {
  font-size: 100%;
  font-weight: bold;
  margin: 0 0 10px;
  display: block;
}

.line {
  padding: 40px 20px;
  border-left: 5px solid;
  border-bottom: 1px dotted;
  background-color: #ffffff;
  border-color: #468847;
}
.line.need {
  background-color: #fcf8e3;
  border-color: #c09853;
}
.line .origin {
  font-size: 14px;
}
.line .origin .num {
  width: 80px;
  display: inline-block;
  color: #d14;
  font-weight: bold;
}
.line .origin h2 {
  font-size: 100%;
  font-weight: bold;
  margin: 0 0 10px;
  display: block;
}
.line .origin pre {
  font-size: 14px;
  font-family: "Ubuntu Mono", sans-serif;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 0;
  background-color: #f9f9f9;
  border-color: #e0e0e0;
  color: #777777;
}
.line .other {
  margin-bottom: 16px;
}
.line .other h2 {
  font-size: 100%;
  font-weight: bold;
  margin: 0 0 10px;
  display: block;
}
.line .other pre {
  font-size: 14px;
  font-family: "Ubuntu Mono", sans-serif;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 0;
  background-color: #fcfcfc;
  border-color: #e7e7e7;
}
.line .translate {

}
.line .translate textarea {
  display: block;
  width: 100%;
  font-size: 14px;
  font-family: "Ubuntu Mono", sans-serif;
  margin: 0 0 10px;
  padding: 10px;
  border-radius: 0;
  color: #000;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.line .translate textarea:focus {
  outline: none;
  box-shadow: none;
  border-color: #f0c873;
}
.line .status {
  padding: 4px 6px;
  border-radius: 3px;
}
.lines.need-only .translated {
  display: none;
}
</style>
</head>
<body>
  <div class="notes">
    <h2>小提示</h2>
    <ol>
      <li>带有橙色边框的段落是暂时还没有人翻译的，应该优先翻译这些段落</li>
      <li>对于别人已经翻译过的段落，如果能认可改翻译结果，请点旁边的 [赞] 按钮；否则请点旁边的 [编辑] 按钮，修改为你理想的翻译结果，并点 [保存]</li>
      <li>使用 Tab / Shift + Tab 可上下切换段落；使用 Alt + S / Shift + Alt + S 可上下切换未翻译的段落</li>
      <li>本文档采用 Markdown 格式编写，翻译时也请保持原来的文档格式</li>
    </ol>
    <p>
      <button class="btn btn-primary" id="btn-toggle">仅显示未翻译的段落</button>
    </p>
  </div>
  <div class="lines">
    <% for (var i = 0; i < lines.length; i++) {
      var line = lines[i];
    %>
    <div class="line <%= line.type %> <%= line.translates.length > 0 ? 'translated' : 'need' %>" data-hash="<%= line.hash %>">
      <div class="origin">
        <h2>原文</h2>
        <pre><%= line.content %></pre>
      </div>
      <% for (var j = 0; j < line.translates.length; j++) {
        var t = line.translates[j];
      %>
      <div class="other" data-id="<%= t.id %>">
        <h2 class="info"><%= users[t.user_id].nickname %> 翻译于 <%= formatTimestamp(t.timestamp) %></h2>
        <pre><%= t.content %></pre>
        <button class="btn btn-xs btn-info vote-line"><i class="glyphicon glyphicon-thumbs-up"></i> 赞 (<%= t.vote %>)</button>
        <button class="btn btn-xs btn-info edit-line"><i class="glyphicon glyphicon-edit"></i> 编辑</button>
      </div>
      <% } %>
      <div class="translate">
        <textarea rows="<%= line.rows %>"><%= line.current ? line.current.content : line.content %></textarea>
        <button class="btn btn-xs btn-primary save-line"><i class="glyphicon glyphicon-ok"></i> 保存</button>
        <span class="status"></span>
      </div>
    </div>
    <% } %>
  </div>
</body>
</html>
<script src="/public/js/jquery.js"></script>
<script src="/public/bootstrap/js/bootstrap.min.js"></script>
<script>

// 保存
$('.save-line').click(function () {
  var $me = $(this);
  var $line = $me.closest('.line');
  var content = $line.find('.translate textarea').val();
  var hash = $line.data('hash');

  function setStatus (style, text) {
    $line.find('.status')
      .removeClass('alert-info')
      .removeClass('alert-success')
      .removeClass('alert-danger')
      .addClass('alert-' + style)
      .text(text)
      .show();
  }

  // 两次提交间隔不得小于5秒
  var t = $me.data('timestamp');
  if (isNaN(t)) t = 0;
  if (Date.now() - t < 5000) return setStatus('info', '正在提交，请耐心等候...');
  $me.data('timestamp', Date.now());

  setStatus('info', '正在提交...');
  $.post('/translate/save', {
    content: content,
    hash:    hash
  }, function (d) {
    $me.data('timestamp', 0);
    if (d.error) {
      setStatus('danger', d.error);
    } else {
      setStatus('success', '已保存');
      setTimeout(function () {
        $line.find('.op .status').fadeOut();
      }, 2000);
      $line.removeClass('need');
    }
  }, 'json');
});

// 编辑框失去焦点时自动保存
$('.translate textarea').blur(function () {
  // 如果编辑框的内容与原文一致，则不能自动保存，以免误操作
  var $line = $(this).closest('.line');
  var origin = $line.find('.origin pre').html();
  var content = $line.find('.translate textarea').val();
  if (origin === content) return;
  $line.find('.save-line').click();
});

// Tab自动跳到下一段落
$(document).on('keydown', '.translate textarea', function (evt) {
  if (evt.keyCode == 9) {
    evt.preventDefault()

    var p = $(this).parents('.line')
    var l

    if ($('.lines').hasClass('need-only')) {
      l = evt.shiftKey
        ? p.prevAll('.need').first()
        : p.nextAll('.need').first()

      if (!l.length) {
        l = evt.shiftKey
          ? p.nextAll('.need').last()
          : p.prevAll('.need').last()
      }
    }
    else {
      l = evt.shiftKey ? p.prev() : p.next()
      if (!l.length) {
        l = evt.shiftKey
          ? p.nextAll().last()
          : p.prevAll().last()
      }
    }

    var t = l.find('.translate textarea')

    $(document.body).scrollTop(l.offset().top)
    t.focus()
    t.select()
  }
  else if (evt.keyCode == 83 && evt.altKey) { // Alt + S
    evt.preventDefault()

    var p = $(this).parents('.line')
    var l = evt.shiftKey
          ? p.prevAll('.need').first()
          : p.nextAll('.need').first()

    if (!l.length) {
      l = evt.shiftKey
        ? p.nextAll('.need').last()
        : p.prevAll('.need').last()
    }

    var t = l.find('.translate textarea')

    $(document.body).scrollTop(l.offset().top)
    t.focus()
    t.select()
  }
})

$(document).on('ready', function () {
  var t = $('.translate textarea').first()
  t.focus()
  t.select()
})

// 编辑
$('.edit-line').click(function () {
  var $me = $(this);
  var $item = $me.closest('.other');
  var $line = $me.closest('.line');
  var content = $item.find('pre').text();
  $line.find('.translate textarea').val(content);
});

// 赞
$('.vote-line').click(function () {
  var $me = $(this);
  var $item = $me.closest('.other');
  var id = $item.data('id');
  $.post('/translate/vote', {id: id}, function (d) {
    if (d.error) return alert(d.error);
    $me.text('已赞').removeClass('btn-info');
  }, 'json');
});

// 仅显示未翻译过的段落
$('#btn-toggle').click(function () {
  var $me = $(this);
  if ($me.text().indexOf('仅') !== -1) {
    $('.lines').addClass('need-only');
    $me.text('显示所有段落');
  } else {
    $('.lines').removeClass('need-only');
    $me.text('仅显示未翻译的段落');
  }
});
</script>
